<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>其他__nextTick</title>
</head>
<body>

<div id="app">
    <div id="div" v-if="showDiv">这是一段文本</div>
    <button type="button" id="test" @click="getText">点击获取文本内容</button>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     *
     * 有一个div，默认使用v-if将其隐藏，当点击一个按钮后，会改变v-if的值，让其显示出来，同时获取到这个div元素的文本内容。
     * 也就是说如果这个v-if的值是false，直接去获取div的内容是获取不到福瑞，因为此时div还没有被创建出来，那么应该在点击按钮以后，
     * 在改变v-if的值为true时，这个div才会被创建，此时才能获取到其文本内容。
     *
     * 但是运行程序会抛出一个错误：TypeError: Cannot read property 'innerHTML' of null"，其实就是说获取不到div元素，这里就涉及到Vue的一个重要概念：异步更新队列。
     *
     * Vue在观察到数据变化时并不会直接更新DOM，而是开启一个队列，并
     *
     * 如果你将v-if修改为v-show，那么无论你运行多少次，程序在后台都会输出你所需要的内容。
     *
     **/


    var app = new Vue({
        el: "#app",
        data: {
            showDiv: false,
        },
        methods: {
            getText: function () {
                this.showDiv = true;  //这个时候其实DOM并没有创建出来
                this.$nextTick(function () {  //$nextTick用于判断DOM是什么时候更新完成的
                    var text = document.getElementById("div").innerHTML;
                    console.log(text)
                })
            }
        }
    });
    /**
     * 理论上我们不应该主动其操作DOM，因为Vue的核心思想就是数据驱动DOM，
     * 但是在很多业务里，避免不了使用一些第三方库，进而会使用到`$nextTick`。
     * 像[popper.js](https://popper.js.org/)、[swiper](http://idangero.us/swiper/)等等，
     * 这些基于原生放入JavaScript的库都有创建和更新及销毁的完整生命周期，与Vue配合时，就需要使用到`$nextTick`了。
     * **/
</script>
</body>
</html>
